<template>
  <div class="">
    <div class="echatone" :id="index"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  // name: 'yieldAnalysis',
  props: ['index', 'mock','deviceCode'],
  data() {
    return {
      //
      myChart: null,
      // mock: [
      //   {
      //     duration: 11425000,
      //     endTime: "2023-11-08 11:10:25",
      //     id: "1111",
      //     startTime: "2023-11-08 08:00:00",
      //     isWork: false,
      //     scheduleName: "未排班",
      //     status: -99,
      //   },
      //   {
      //     duration: 436000,
      //     endTime: "2023-11-08 11:17:41",
      //     id: "222",
      //     startTime: "2023-11-08 11:10:25",
      //     isWork: false,
      //     scheduleName: "未排班",
      //     status: 1,
      //   },
      //   {
      //     duration: 683000,
      //     endTime: "2023-11-08 11:29:04",
      //     id: "1133311",
      //     startTime: "2023-11-08 11:17:41",
      //     isWork: false,
      //     scheduleName: "未排班",
      //     status: -99,
      //   },
      //   {
      //     duration: 21597000,
      //     endTime: "2023-11-08 17:29:01",
      //     id: "114411",
      //     startTime: "2023-11-08 11:29:04",
      //     isWork: false,
      //     scheduleName: "未排班",
      //     status: 1,
      //   },
      // ],
      stateColor: {
        '空闲': "#1db360",//绿色
        '3': "#fabb2d",//黄色
        '已排程': "#f21d40",//红色
        '5': "#479bfc",//蓝色
        '6': "#b493fb",//紫色
        '-99': '#777777'//灰色
      },
      data: [],
      state: { startTime: "", endTime: "" },
      startTime: "",
      endTime: "",
      rangeId: Math.floor(Date.now() / 1000),
    };
  },
  created() {
  },
  mounted() {
    this.initEchart();
    window.addEventListener('resize', this.resize);

  },
  destroyed() {
    echarts.dispose(this.myChart);
    this.myChart = null;
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    updateChart(devStatusRecords) {
      let data = [];
      this.startTime = this.$moment(devStatusRecords[0].startTime).unix();
      this.endTime = this.$moment(
        devStatusRecords[devStatusRecords.length - 1].endTime
      ).unix();
      this.state.startTime = this.$moment(devStatusRecords[0].startTime).format(
        "YYYY-MM-DD HH:mm"
      );
      this.state.endTime = this.$moment(
        devStatusRecords[devStatusRecords.length - 1].endTime
      ).format("YYYY-MM-DD HH:mm");
      const that = this;
      devStatusRecords.filter((val, index) => {
        let baseTime = this.$moment(val.startTime).unix();
        let duration = val.duration / 1000;
        data.push({
          name: val.state,
          value: [index, baseTime, baseTime + duration, duration, val],
          itemStyle: {
            normal: {
              color: that.stateColor[val.state],
            },
          },
        });
      });
      this.data = data;
    },
    resize() {
      this.myChart.resize();
    },
    initEchart() {
      if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
        this.myChart.dispose(); //销毁
      }
      this.myChart = echarts.init(document.getElementById(`${this.index}`));
      const renderItem = (params, api) => {
        let categoryIndex = api.value(0);
        let start = api.coord([api.value(1), categoryIndex]);
        let end = api.coord([api.value(2), categoryIndex]);
        let height = api.size([0, 1])[1];
        let rectShape = echarts.graphic.clipRectByRect(
          {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height,
          },
          {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height,
          }
        );
        return (
          rectShape && {
            type: "rect",
            transition: ["shape"],
            shape: rectShape,
            style: api.style(),
            emphasis: {
              style: {
                shadowColor: "rgba(51,51,51,0.5)",
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
              },
            },
          }
        );
      };
      const tooltipStr = (params) => {
        let htmlStr = `<div>
          <div style="margin-bottom: 15px">
            <span style="color: #666666;display:inline-block;width:100px;">开始时间:</span>
            <span style="color:#333333">${params.value[4].startTime}</span>
          </div>
           <div style="margin-bottom: 15px">
            <span style="color: #666666;display:inline-block;width:100px;">结束时间:</span>
            <span style="color:#333333">${params.value[4].endTime}</span>
          </div>
          <div style="margin-bottom: 1px">
            <span style="color: #666666;display:inline-block;width:100px;">设备编号:</span>
            <span style="color:#333333">${this.deviceCode}</span>
          </div>
        </div>`;
        return htmlStr;
      };
      this.updateChart(this.mock);
      const that = this;
      this.myChart.setOption({
        tooltip: {
          position: "top",
          triggerOn: "mousemove",
          formatter: function (params) {
            return tooltipStr(params);
          },
        },
        dataZoom: [
          {
            type: "inside",
            filterMode: "weakFilter",
          },
        ],
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0,
          height: 20,
          width: "100%",
        },
        xAxis: {
          min: this.startTime,
          max: this.endTime,
          scale: true,
          axisLine: false,
          axisTick: false,
          splitLine: false,
          axisLabel: false,
        },
        yAxis: {
          axisLine: false,
          axisTick: false,
          splitLine: false,
          axisLabel: false,
          data: [""],
        },
        series: [
          {
            legendHoverLink: false,
            type: "custom",
            renderItem: renderItem,
            encode: {
              x: [1, 2],
              y: 0,
            },
            data: that.data,
          },
        ],
      });
    },

  },

};
</script>
<style scoped lang="scss">
.echatone {
  width: 100%;
  height: 25px;
  // display: flex;
}

.timeAxis {
  line-height: 25px;
}

.startTime {
  font-size: 12px;
  color: #333333;
}

.endTime {
  font-size: 12px;
  color: #333333;
  float: right;
}
</style>